<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>淡入、淡出</title>
   <style>
      #div1 {	    width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:0.3;
	  }
   </style>  
   <script>
   window.onload=function(){
     var oDiv=document.getElementById("div1");
       oDiv.onmouseover=function(){
	       startmove(100);	   	 	   
	   }; 
	   oDiv.onmouseout=function(){
	       startmove(30);	 	   
	   };
   };
        var alpha=30;
        var timer=null;
	  function startmove(iTarget){
	     var oDiv=document.getElementById("div1");
	     clearInterval(timer);
	     timer=setInterval(function(){
		    var speed=0;
			if(alpha<iTarget){
			  speed=10;
			}else{
			   speed=-10;
			}
		    if(alpha==iTarget){
			   clearInterval(Timer);
			}else{
			   alpha+=speed;
			   oDiv.style.filter="alpha(opacity:"+alpha+")";
			   oDiv.style.opacity=alpha/100;
			} 
		 },30);
	  
	  }
   
   
   
   </script>
</head>
<body>
   <div id="div1">
   </div>
</body>
</html>